<template>
  <div>
    <el-row :gutter="3">
      <el-col :span="7" style="height : 635px;overflow : auto;">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>菜单列表</span>
          </div>
          <div class="text item">
            <el-form class="demo-form-inline">
              <el-form-item>
                <el-input v-model="getMenuAll.name" placeholder="菜单名称"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button @click="getTree()">搜索</el-button>
                <el-button @click="qk()">重置</el-button>
                <el-button @click="djMenuAll()">添加</el-button>
                <el-button @click="deleteMenuAll()">删除</el-button>
              </el-form-item>
            </el-form>
            <el-tree
              ref="tree"
              node-key="id"
              :data="tree"
              :props="props"
              :default-expand-all="true"
              :check-strictly="true"
              :expand-on-click-node="false"
              show-checkbox
              @node-click="TreeDJ"
              @check-change="handleCheckChange">
            </el-tree>
          </div>
        </el-card>
      </el-col>
      <el-col :span="7" style="height : 635px;overflow : auto;">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>详细数据</span>
          </div>
          <div class="text item">
            <el-form :model="menuAll" class="demo-form-inline" :rules="rules">
              <el-form-item label="上级id">
                <el-input v-model="menuAll.parentId" disabled></el-input>
              </el-form-item>
              <el-form-item label="名称" prop="name">
                <el-input v-model="menuAll.name"></el-input>
              </el-form-item>
              <el-form-item label="路由url" prop="path">
                <el-input v-model="menuAll.path"></el-input>
              </el-form-item>
              <el-form-item label="图标">
                <el-popover
                  placement="bottom"
                  width="450"
                  trigger="click">
                   <span slot="reference" style="display:inline-block;width:200px;height:40px;line-height:40px;">
                       <i :class="menuAll.icon"></i>
                       {{ menuAll.icon }}
                   </span>

                  <div class="iconList">
                    <i v-for="item in iconList" :key="item" :class="'el-icon-'+item" @click="setIcon('el-icon-'+item)"
                       style="font-size:20px"></i>
                  </div>
                </el-popover>
                <!--                <el-input v-model="menuAll.icon"></el-input>-->
              </el-form-item>
              <el-form-item label="状态">
                <el-radio v-model="menuAll.isEnable" :label="true">启用</el-radio>
                <el-radio v-model="menuAll.isEnable" :label="false">禁用</el-radio>
              </el-form-item>
              <el-form-item label="排序">
                <el-input-number v-model="menuAll.sortValue" :min="0"></el-input-number>
              </el-form-item>
              <el-form-item label="分组">
                <el-input v-model="menuAll.mgroup"></el-input>
              </el-form-item>
              <el-form-item label="描述">
                <el-input v-model="menuAll.mdescribe"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button style="width: 100%" @click="addMenuAll">提交</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-col>
      <el-col :span="10" style="height : 635px;overflow : auto;">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>权限配置</span>
          </div>
          <div class="text item">
            <el-form>
              <el-form-item label="编码">
                <el-input v-model="getMenuButtons.code"></el-input>
              </el-form-item>
              <el-form-item label="名称">
                <el-input v-model="getMenuButtons.name"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button @click="dj()">查询</el-button>
                <el-button @click="djMenuButtons()">添加</el-button>
              </el-form-item>
            </el-form>
            <el-table :data="menuButtons" v-loading="loading" style="width: 100%">
              <el-table-column prop="code" label="编码" width="180"></el-table-column>
              <el-table-column prop="name" label="名称" width="100"></el-table-column>
              <el-table-column prop="method" label="请求方式" width="100"></el-table-column>
              <el-table-column prop="url" label="请求地址" width="300"></el-table-column>
              <el-table-column prop="rdescribe" label="描述" width="300"></el-table-column>
              <el-table-column label="操作" width="100px" fixed="right">
                <template slot-scope="scope">
                  <el-button type="text" @click="deleteMenuButtons(scope.row.id)">删除</el-button>
                  <el-button type="text" @click="updateMenuButtons(scope.row)">修改</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div style="text-align: center">
            <br>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="getMenuButtons.num"
              :page-sizes="[ 5, 10, 15, 20]"
              :page-size="getMenuButtons.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="sizes">
            </el-pagination>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!--添加权限的表单-->
    <el-dialog title="新增" :visible.sync="dialogFormVisible">
      <el-form :model="addMenuButtons" :rules="rulesButtons">
        <el-form-item label="编码" label-width="120px" prop="code">
          <el-input v-model="addMenuButtons.code"></el-input>
        </el-form-item>
        <el-form-item label="名称" label-width="120px" prop="name">
          <el-input v-model="addMenuButtons.name"></el-input>
        </el-form-item>
        <el-form-item label="请求方式" label-width="120px" prop="method">
          <el-input v-model="addMenuButtons.method"></el-input>
        </el-form-item>
        <el-form-item label="请求地址" label-width="120px" prop="url">
          <el-input v-model="addMenuButtons.url"></el-input>
        </el-form-item>
        <el-form-item label="描述" label-width="120px">
          <el-input v-model="addMenuButtons.rdescribe"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addPostMenuButtons()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import menu from "../../api/rightsmanagement/menumanagement/configurationMenu"

export default {
  name: "configurationMenu",
  data() {
    return {
      rulesButtons: {
        code: [{required: true, message: '请填写完整数据', trigger: 'blur'}],
        method: [{required: true, message: '请填写完整数据', trigger: 'blur'}],
        name: [{required: true, message: '请填写完整数据', trigger: 'blur'}],
        url: [{required: true, message: '请填写完整数据', trigger: 'blur'}],
      },
      dialogFormVisible: false,
      rules: {
        name: [{required: true, message: '请填写完整数据', trigger: 'blur'}],
        path: [{required: true, message: '请填写完整数据', trigger: 'blur'}]
      },
      loading: false,
      tree: [],
      props: {
        id: '',
        label: 'name',
        children: 'pdMenu'
      },
      // 选中的菜单id
      menuAllId: 0,
      // 查询菜单的条件
      getMenuAll: {
        name: ''
      },
      // 菜单显示数据
      menuAll: {
        id: '',
        parentId: 0,
        name: '',
        path: '',
        icon: '',
        isEnable: true,
        sortValue: 0,
        mgroup: '',
        mdescribe: ''
      },
      // 保存权限查询条件
      getMenuButtons: {
        num: 1,
        size: 5,
        code: '',
        menuId: '',
        name: ''
      },
      // 图标显示数据
      iconList: ["platform-eleme", "eleme", "delete-solid", "delete", "s-tools", "setting", "user-solid", "user", "phone", "phone-outline", "more", "more-outline", "star-on", "star-off", "s-goods", "goods", "warning", "warning-outline", "question", "info", "remove", "circle-plus", "success", "error", "zoom-in", "zoom-out", "remove-outline", "circle-plus-outline", "circle-check", "circle-close", "s-help", "help", "minus", "plus", "check", "close", "picture", "picture-outline", "picture-outline-round", "upload", "upload2", "download", "camera-solid", "camera", "video-camera-solid", "video-camera", "message-solid", "bell", "s-cooperation", "s-order", "s-platform", "s-fold", "s-unfold", "s-operation", "s-promotion", "s-home", "s-release", "s-ticket", "s-management", "s-open", "s-shop", "s-marketing", "s-flag", "s-comment", "s-finance", "s-claim", "s-custom", "s-opportunity", "s-data", "s-check", "s-grid", "menu", "share", "d-caret", "caret-left", "caret-right", "caret-bottom", "caret-top", "bottom-left", "bottom-right", "back", "right", "bottom", "top", "top-left", "top-right", "arrow-left", "arrow-right", "arrow-down", "arrow-up", "d-arrow-left", "d-arrow-right", "video-pause", "video-play", "refresh", "refresh-right", "refresh-left", "finished", "sort", "sort-up", "sort-down", "rank", "loading", "view", "c-scale-to-original", "date", "edit", "edit-outline", "folder", "folder-opened", "folder-add", "folder-remove", "folder-delete", "folder-checked", "tickets", "document-remove", "document-delete", "document-copy", "document-checked", "document", "document-add", "printer", "paperclip", "takeaway-box", "search", "monitor", "attract", "mobile", "scissors", "umbrella", "headset", "brush", "mouse", "coordinate", "magic-stick", "reading", "data-line", "data-board", "pie-chart", "data-analysis", "collection-tag", "film", "suitcase", "suitcase-1", "receiving", "collection", "files", "notebook-1", "notebook-2", "toilet-paper", "office-building", "school", "table-lamp", "house", "no-smoking", "smoking", "shopping-cart-full", "shopping-cart-1", "shopping-cart-2", "shopping-bag-1", "shopping-bag-2", "sold-out", "sell", "present", "box", "bank-card", "money", "coin", "wallet", "discount", "price-tag", "news", "guide", "male", "female", "thumb", "cpu", "link", "connection", "open", "turn-off", "set-up", "chat-round", "chat-line-round", "chat-square", "chat-dot-round", "chat-dot-square", "chat-line-square", "message", "postcard", "position", "turn-off-microphone", "microphone", "close-notification", "bangzhu", "time", "odometer", "crop", "aim", "switch-button", "full-screen", "copy-document", "mic", "stopwatch", "medal-1", "medal", "trophy", "trophy-1", "first-aid-kit", "discover", "place", "location", "location-outline", "location-information", "add-location", "delete-location", "map-location", "alarm-clock", "timer", "watch-1", "watch", "lock", "unlock", "key", "service", "mobile-phone", "bicycle", "truck", "ship", "basketball", "football", "soccer", "baseball", "wind-power", "light-rain", "lightning", "heavy-rain", "sunrise", "sunrise-1", "sunset", "sunny", "cloudy", "partly-cloudy", "cloudy-and-sunny", "moon", "moon-night", "dish", "dish-1", "food", "chicken", "fork-spoon", "knife-fork", "burger", "tableware", "sugar", "dessert", "ice-cream", "hot-water", "water-cup", "coffee-cup", "cold-drink", "goblet", "goblet-full", "goblet-square", "goblet-square-full", "refrigerator", "grape", "watermelon", "cherry", "apple", "pear", "orange", "coffee", "ice-tea", "ice-drink", "milk-tea", "potato-strips", "lollipop", "ice-cream-square", "ice-cream-round"],
      sizes: 0,
      // 保存权限显示条件
      menuButtons: [],
      // 保存添加或修改权限数据
      addMenuButtons: {
        id: "",
        code: "",
        method: "",
        name: "",
        menuId: "",
        url: "",
        rdescribe: ""
      }
    }
  },
  methods: {
    // 删除
    deleteMenuButtons(id) {
      menu.deleteMenuButtons({"idList": [id]})
    },
    // 点击修改权限
    updateMenuButtons(obj) {
      this.dialogFormVisible = true
      this.addMenuButtons = obj
    },
    // 添加或修改权限数据，
    addPostMenuButtons() {
      this.addMenuButtons.menuId = this.menuAll.id
      // 非空判断
      if (this.addMenuButtons.code === "") {
        return;
      }
      if (this.addMenuButtons.method === "") {
        return;
      }
      if (this.addMenuButtons.name === "") {
        return;
      }
      if (this.addMenuButtons.url === "") {
        return;
      }
      if (this.addMenuButtons.id !== "") {
        this.$store.commit("startAnimation", true);
        menu.updateMenuButtons(this.addMenuButtons).then(({data}) => {
          if (data.flag) {
            this.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success'
            });
          } else {
            this.$notify.error({
              title: '失败',
              message: '修改失败'
            });
          }
          this.$store.commit("startAnimation", false);
          // 更新数据
          this.dj()
        })
      } else {
        menu.insertMenuButtons(this.addMenuButtons).then(({data}) => {
          if (data.flag) {
            this.$notify({
              title: '成功',
              message: '添加成功',
              type: 'success'
            });
          } else {
            this.$notify.error({
              title: '失败',
              message: '添加失败'
            });
          }
          this.$store.commit("startAnimation", false);
          // 更新数据
          this.dj()
        })
      }
      this.dialogFormVisible = false
    },
    // 点击添加权限
    djMenuButtons() {
      if (this.menuAll.id !== "") {
        this.dialogFormVisible = true
        this.addMenuButtons = {id: "", code: "", method: "", url: "", rdescribe: ""}
      }
    },
    // 删除树节点时
    deleteMenuAll() {
      this.$store.commit("startAnimation", true);
      menu.deleteMenuAll([this.menuAllId]).then(({data}) => {
        if (data.flag) {
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success'
          });
        } else {
          this.$notify.error({
            title: '失败',
            message: '删除失败'
          });
        }
        this.getTree()
        this.$store.commit("startAnimation", false);
      })
    },
    // 添加或修改树时
    addMenuAll() {
      if (this.menuAll.name === "") {
        return;
      }
      if (this.menuAll.path === "") {
        return;
      }
      this.$store.commit("startAnimation", true);
      if (this.menuAll.id !== '') {
        menu.updateMenuAll(this.menuAll).then(({data}) => {
          if (data.flag) {
            // 刷新
            this.$root.Bus.$emit('menuUpdate', false) // 发送一个通知给菜单刷新信息
            this.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success'
            });
            this.getTree()
          } else {
            this.$notify.error({
              title: '失败',
              message: '修改失败'
            });
          }
          this.$store.commit("startAnimation", false);
        })
      } else {
        menu.insertMenuAll(this.menuAll).then(({data}) => {
          if (data.flag) {
            this.$notify({
              title: '成功',
              message: '添加成功',
              type: 'success'
            });
            this.getTree()
          } else {
            this.$notify.error({
              title: '失败',
              message: '添加失败'
            });
          }
          this.$store.commit("startAnimation", false);
        })
      }
    },
    // 点击添加树时
    djMenuAll() {
      this.bf()
      this.menuAll.parentId = this.menuAllId
    },
    // 选上树的时候
    handleCheckChange(data, checked, indeterminate) {
      if (checked) {
        this.menuAllId = data.id
        // 菜单树中选中这个
        this.$refs.tree.setCheckedKeys([data.id])
      } else {
        this.menuAllId = 0
      }
    },
    // 点击树的时候
    TreeDJ(data) {
      this.menuAll = data.pdAuthMenu
      this.getMenuButtons.menuId = data.id
      this.dj()
    },
    // 查询权限
    dj() {
      if (this.getMenuButtons.menuId !== '') {
        this.loading = true
        console.log(this.getMenuButtons)
        menu.getMenuButtons(this.getMenuButtons).then(({data}) => {
          console.log(this.getMenuButtons)
          if (data.data.records.length > 0) {
            if (data.data.records[0].menuId === this.getMenuButtons.menuId) {
              this.menuButtons = data.data.records
            }
          }
          this.sizes = data.data.total
          this.loading = false
        })
      }
    },
    // 获取机构树
    getTree() {
      menu.getMenuAll(this.getMenuAll).then(({data}) => {
        this.dg(data.data)
        this.tree = data.data
      })
    },
    // 递归设置机构名称
    dg(data) {
      if (data != null) {
        for (var i = 0; i < data.length; i++) {
          if (data[i].pdMenu.length > 0) {
            this.dg(data[i].pdMenu)
          } else {
            delete data[i].pdMenu
          }
          this.$set(data[i], 'id', data[i].pdAuthMenu.id)
          this.$set(data[i], 'name', data[i].pdAuthMenu.name)
        }
      }
    },
    // 清空
    qk() {
      this.menuAllId = 0
      this.$refs.tree.setCheckedKeys([])
      this.bf()
      this.getTree()
    },
    // 清空部分
    bf() {
      this.menuAll.parentId = 0
      this.getMenuAll = {name: ''}
      this.menuAll = {
        id: '',
        parentId: 0,
        name: '',
        path: '',
        icon: '',
        isEnable: true,
        sortValue: 0,
        mgroup: '',
        mdescribe: ''
      }
      this.getMenuButtons.code = ''
      this.getMenuButtons.menuId = ''
      this.getMenuButtons.name = ''
      this.menuButtons = []
      this.addMenuButtons = {id: "", code: "", method: "", menuId: "", url: "", rdescribe: ""}
    },
    // 显示数
    handleSizeChange(v) {
      this.getMenuButtons.page = v
      this.dj()
    },
    // 上下页
    handleCurrentChange(v) {
      this.getMenuButtons.num = v
      this.dj()
    },
    setIcon(icon) {
      console.log(icon)
      this.menuAll.icon = icon;//将i的样式设为选中的样式el-icon-xxx
    }
  },
  created() {
    this.getTree()
  }
}
</script>
<style>
</style>
